<!-- 综合能耗统计报表 -->
<template>
    <div class="mainContent">
        <el-form ref="ruleForm" :model="form" label-width="115px">
            <el-row>
                <el-col :span="5">
                    <el-form-item label="设备类别：">
                        <el-select v-model="form.sblb" placeholder="请选择设备类别">
                            <el-option label="电" value="dian"></el-option>
                            <el-option label="水" value="shui"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="总分表级别：">
                        <el-select v-model="form.zfbjb" placeholder="请选择总分表级别">
                            <el-option label="1级" value="1"></el-option>
                            <el-option label="2级" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" style="padding-left: 2%">
                    <el-form-item label="区域建筑/部门：">
                        <el-select v-model="form.depart" placeholder="请选择区域建筑/部门">
                            <el-option label="部门1" value="1"></el-option>
                            <el-option label="部门2" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="能耗分项：">
                        <el-select v-model="form.nhfx" placeholder="请选择能耗分项">
                            <el-option label="照明插座" value="1"></el-option>
                            <el-option label="照明插座2" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="5">
                    <el-form-item label="建筑类别：">
                        <el-select v-model="form.jzlb" placeholder="请选择建筑类别">
                            <el-option label="公共教学" value="dian"></el-option>
                            <el-option label="公共教学1" value="shui"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="统计时段：">
                        <el-select v-model="form.tjsd" placeholder="请选择统计时段">
                            <el-option label="早上" value="1"></el-option>
                            <el-option label="中午" value="2"></el-option>
                            <el-option label="晚上" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" style="padding-left: 2%">
                    <el-form-item label="对比维度：">
                        <el-select v-model="form.dbwd" placeholder="请选择对比维度">
                            <el-option label="年同比" value="1"></el-option>
                            <el-option label="年同比2" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="时间对比：">
                        <el-date-picker v-model="form.value1" type="date" placeholder="请选择年月日" style="width: 140px"> </el-date-picker>
                        对比
                        <el-date-picker v-model="form.value2" type="date" placeholder="请选择年月日" style="width: 140px"> </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="5">
                    <el-form-item label="是否工作日：">
                        <el-select v-model="form.sfgzr" placeholder="请选择是否工作日">
                            <el-option label="工作日" value="dian"></el-option>
                            <el-option label="工作日2" value="shui"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="统计单位：">
                        <el-select v-model="form.tjdw" placeholder="请选择统计单位">
                            <el-option label="用量" value="1"></el-option>
                            <el-option label="用量1" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" style="padding-left: 2%">
                    <el-form-item label="统计指标：">
                        <el-select v-model="form.tjzb" placeholder="请选择统计指标">
                            <el-option label="总能耗" value="1"></el-option>
                            <el-option label="总能耗2" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">分析</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="bottomContent">
            <div class="rightContent">
                <div class="rightTitle">
                    <span>综合能耗报表</span>
                    <label> <i class="el-icon el-icon-upload2 download"></i>&nbsp;&nbsp;导出 </label>
                    <label> <i class="el-icon el-icon-printer printer"></i>&nbsp;&nbsp;打印 </label>
                </div>
                <div class="title">
                    <label>统计楼栋：</label>
                    <span>30</span>
                    <label>统计日期：</label>
                    <span>2025年</span>
                    <label>制表日期：</label>
                    <span>2025-04-02</span>
                    <label>单位：</label>
                    <span>kWh</span>
                </div>
                <div class="tableTitle">总用量</div>
                <div class="tableContent">
                    <el-table :data="tableData" style="width: 100%" size="small">
                        <el-table-column prop="loudong" label="楼栋"> </el-table-column>
                        <el-table-column prop="yongliang" label="用量(kWh)"> </el-table-column>
                        <el-table-column prop="jine" label="金额(元)"> </el-table-column>
                        <el-table-column label="能耗使用类型" align="center">
                            <el-table-column prop="jiashu" label="家属"> </el-table-column>
                            <el-table-column prop="sushe" label="宿舍"> </el-table-column>
                            <el-table-column prop="gonggongjiaoxue" label="公共教学"> </el-table-column>
                            <el-table-column prop="qita" label="其他"> </el-table-column>
                            <el-table-column prop="bangong" label="办公"> </el-table-column> </el-table-column
                        ><el-table-column label="能耗分项" align="center">
                            <el-table-column prop="zhaoming" label="照明插座"> </el-table-column>
                            <el-table-column prop="kongtiao" label="空调"> </el-table-column>
                            <el-table-column prop="dongli" label="动力"> </el-table-column>
                            <el-table-column prop="teshu" label="特殊"> </el-table-column>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="tableTitle">人均能耗</div>
                <div class="tableContent">
                    <el-table :data="tableData" style="width: 100%" size="small">
                        <el-table-column prop="loudong" label="楼栋"> </el-table-column>
                        <el-table-column prop="renjun" label="人均能耗(kWh)"> </el-table-column>
                        <el-table-column prop="jine" label="人均金额(元)"> </el-table-column>
                        <el-table-column label="能耗使用类型" align="center">
                            <el-table-column prop="jiashu" label="家属"> </el-table-column>
                            <el-table-column prop="sushe" label="宿舍"> </el-table-column>
                            <el-table-column prop="gonggongjiaoxue" label="公共教学"> </el-table-column>
                            <el-table-column prop="qita" label="其他"> </el-table-column>
                            <el-table-column prop="bangong" label="办公"> </el-table-column> </el-table-column
                        ><el-table-column label="能耗分项" align="center">
                            <el-table-column prop="zhaoming" label="照明插座"> </el-table-column>
                            <el-table-column prop="kongtiao" label="空调"> </el-table-column>
                            <el-table-column prop="dongli" label="动力"> </el-table-column>
                            <el-table-column prop="teshu" label="特殊"> </el-table-column>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'cECSReport',
    components: {},
    data() {
        return {
            form: {
                value1: '',
                value2: '',
                sblb: '',
                depart: '',
                zfbjb: '',
                nhfx: '',
                jzlb: '',
                tjsd: '',
                dbwd: '',
                sfgzr: '',
                tjdw: '',
                tjzb: ''
            },
            tableData: [
                {
                    loudong: '北院',
                    yongliang: '11444',
                    jine: '121231',
                    jiashu: '0.00',
                    sushe: '2600',
                    gonggongjiaoxue: 123123,
                    qita: 12312,
                    bangong: 222,
                    zhaoming: 333,
                    kongtiao: 2123,
                    dongli: 3333,
                    teshu: 666
                },
                {
                    loudong: '南院',
                    yongliang: '11444',
                    jine: '121231',
                    jiashu: '0.00',
                    sushe: '2600',
                    gonggongjiaoxue: 123123,
                    qita: 12312,
                    bangong: 222,
                    zhaoming: 333,
                    kongtiao: 2123,
                    dongli: 3333,
                    teshu: 666
                },
                {
                    loudong: '合计',
                    yongliang: '11444',
                    jine: '121231',
                    jiashu: '0.00',
                    sushe: '2600',
                    gonggongjiaoxue: 123123,
                    qita: 12312,
                    bangong: 222,
                    zhaoming: 333,
                    kongtiao: 2123,
                    dongli: 3333,
                    teshu: 666
                }
            ]
        }
    },
    computed: {},
    created() {},
    methods: {
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!')
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.mainContent {
    background-color: #fff;
    height: calc(100vh - 100px);
    margin: 10px 0;
    width: 100%;
    padding: 10px;
    text-align: left;
    .bottomContent {
        margin: 20px;
        border: 1px solid #eee;
        padding: 20px;
        border-radius: 6px;
        display: flex;
        .rightContent {
            position: relative;
            flex: 1;
            .refresh {
                position: absolute;
                width: 20px;
                right: 20px;
                cursor: pointer;
            }
            .tableTitle {
                height: 40px;
                text-align: center;
                line-height: 40px;
                background-color: #e9ecf1;
                color: #333;
                font-weight: bold;
                font-size: 16px;
            }
            .tableContent {
            }
            .title {
                font-size: 16px;
                height: 35px;
                label {
                    color: #999;
                }
                span {
                    color: #333;
                    margin-right: 25px;
                }
            }
            .rightTitle {
                text-align: center;
                height: 60px;
                line-height: 60px;
                margin-bottom: 10px;
                span {
                    text-align: center;
                    font-weight: bold;
                    font-size: 18px;
                }
                label {
                    text-align: right;
                    float: right;
                    color: #3b8cfc;
                    margin-right: 15px;
                    cursor: pointer;
                    font-size: 16px;
                }
                .printer {
                    color: #3b8cfc;
                }
                .download {
                    color: #3b8cfc;
                }
            }
        }
    }
}
</style>
